<!DOCTYPE html>
<html>
	<head><!--头标签-->
		<meta charset="utf-8" /><!--编码，搜索的关键字，描述，内容类型等等-->
		<title>第一个网页</title><!--页面的标题-->
		<style>
			/*使用class标签设置:class选择器：.开头*/
			.fontstyle{
				font-size: 45px;
				color: rgba(12%,80%,22%,0.5);/*颜色：第一种方式：16进制表示，0-255 --- 00-FF
				                    第二种方式：使用表示颜色的单词 
				       第三种表示：rgb()两种：1）使用0-255 2）百分比 ,rgba() a:0-1*/
			}
			/*id选择器：#开头*/
			#div01{
				width: 500px;
				height: 100px;
				border: 2px solid blue;/*border:边框属性：属性值：边框的宽度，样式，颜色*/
			}
			#div01 img{/*子代选择器，在id为div01的元素中 有img标签的元素，设置高度为100%*/
			 height:70% ;	/*针对#div01元素来说的*/
			}
			span{/*标签选择器*/
				
			}
		</style>
		
	</head>
	
	
	<body>
		<!--
			ctrl+鼠标中间的滑轮：缩放字体
			html：标签 ，使用的<>实现的，
			css:样式 ：字体样式，背景样式，边框的样式，布局样式等等
			JavaScript
		-->
		<div id="div01"><!--块标签：id div的属性，id的值：自定义的-->
			 <img src="img/img01.jpg"/><!--单标签：img图片标签：src：图片引入-->
			 <p>中午休息的好吗？</p><!--段落标签-->
		</div>
		<span class="fontstyle">计算班</span><!--行标签-->
		<span class="fontstyle">软件班 </span>
		
	</body>
</html>
